<template>
		<button
			:class="[disabled||loading?'hover':'', 'z-button', 'bg-'+bg, color, radiusNone?'radius-none':'', size, zClass]"
			hover-class="hover"
			:type="type"
			:style="{'color':color?'':fontColor, 'background-color':bg?'':bgColor}"
			@click.stop="clickEvent"
		>
			<text v-if="loading" class="iconfont zp-loading-icon">&#xe6d1;</text>
			<slot/>
		</button>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'type':{type:String},
			'bgColor':{type:String},
			'fontColor':{type:String},
			'radiusNone':{type:Boolean},
			'disabled':{type:Boolean},
			'loading':{type:Boolean},
			'size':{type:String}
		},
		computed:{
			// 背景色
			bg(){return this.$zp.mapColorStr[this.bgColor] || ''},
			// 文字颜色
			color(){return this.$zp.mapColorStr[this.fontColor] || ''}
		},
		methods:{
			clickEvent(e){
				if(this.disabled||this.loading)return false
				this.$emit('click', e)
			}
		}
	}
</script>

<style lang="scss">
	$gap: 20upx;
	.z-button{
		height: auto;
		min-height: $form-cell-min-height;
		padding: $gap/2 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $font-size-base;
		&.hover{
			opacity: $hover-opacity;
		}
		&.radius-none{
			border-radius: 0;
		}
		.zp-loading-icon{
			margin-right: 20upx;
		}
		&.md{
			padding: $gap/3 0;
			font-size: $font-size-md;
		}
		&.sm{
			padding: $gap/4 0;
			font-size: $font-size-sm;
		}
	}
</style>
